<template>
    <d2-container>
        <el-button-group>
            <el-button type="primary" icon="el-icon-refresh" size="small" @click="getCatalogTree">刷新</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="add">添加</el-button>
            <el-button type="primary" icon="el-icon-edit" size="small" :disabled="currentId == 0" @click="edit">编辑
            </el-button>
            <el-button type="primary" icon="el-icon-delete" size="small" :disabled="currentId == 0" @click="del">删除
            </el-button>
            <el-button type="primary" icon="el-icon-aim" :disabled="currentId == 0" size="small" @click="cancel">取消
            </el-button>
        </el-button-group>
        <el-popover placement="top-start" title="温馨提示" width="400" trigger="hover">
            <li>想要建立子节点，请选择父节点后点击`添加`按钮</li>
            <el-button slot="reference" size="small" icon="el-icon-info" style="float:right">操作提示</el-button>
        </el-popover>
        <el-row :gutter="20">
            <el-col :span="8" style="margin-top:15px;">
                <el-card shadow="hover" v-loading="treeLoading">
                    <el-tree ref="tree" class="filter-tree" node-key="id" highlight-current
                        :expand-on-click-node="false" :data="dataTree" @node-click="getTreeData">
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>
                                <d2-icon :name="data.icon" style="margin-right:10px;" />
                                {{ data.label }}
                            </span>
                            <span style="color:#a7a7a7;">
                                {{data.typeEnum}}
                            </span>
                        </span>
                    </el-tree>
                </el-card>
            </el-col>
            <el-col :span="16" style="margin-top:15px;">
                <el-card shadow="hover">
                </el-card>
            </el-col>
        </el-row>

        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getCatalogTree"></add-or-update>
    </d2-container>
</template>

<script>
    import * as catalogtreeService from '@/api/bdms/catalogtree'
    import AddOrUpdate from './add-or-update'
    export default {
        name: "catalogPage",
        data() {
            return {
                treeLoading: false,
                currentId: 0,
                dataTree: [],
                addOrUpdateVisible: false,
                catalogTreeQuery: {
                    module: 'system',
                    type: '2'
                }
            };
        },
        components: {
            AddOrUpdate
        },
        created() {
            this.getCatalogTree();
        },
        methods: {
            getCatalogTree() {
                this.treeLoading = true;
                const query = {
                    module: this.catalogTreeQuery.module,
                    type: this.catalogTreeQuery.type
                }
                catalogtreeService.getcatalogtreetree(query).then(data => {
                    this.dataTree = data;
                    this.treeLoading = false;
                });
            },
            getTreeData(data) {
                let code = data.id;
                this.currentId = code;
            },
            add() {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    const data = {
                        id: this.currentId,
                        pid: this.currentId,
                        module: this.catalogTreeQuery.module,
                        type: this.catalogTreeQuery.type
                    }
                    this.$refs.addOrUpdate.init(data)
                })
            },
            edit() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择菜单！');
                    return
                }
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    const data = {
                        id: this.currentId,
                    }
                    this.$refs.addOrUpdate.init(data)
                })
            },
            del() {
                if (this.currentId == 0) {
                    this.$message.error('请从左侧选择菜单！');
                    return
                }
                this.$confirm("确认删除？", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "删除",
                    cancelButtonText: "取消"
                }).then(() => {
                    catalogtreeService.delcatalogtree(this.currentId).then(() => {
                        this.currentId = 0;
                        this.getCatalogTree();
                    });
                });
            },
            cancel() {
                this.currentId = 0;
            },
        },

    };
</script>

<style scoped>
    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        padding-right: 8px;
    }
</style>